import "./index.scss";
import { Button, Form, Input } from "@arco-design/web-react";
import loginSvg from "@/assets/svgs/blob-scene-haikei.svg";

const FormItem = Form.Item;

export default function LoginPage() {
  const [form] = Form.useForm();

  return (
    <div className="login-page">
      <div className="login-box relative z-1  ">
        <h3 className="text-3xl text-center mb-8">后台管理系统</h3>
        <div className="flex w-full">
          <div className="relative z-10 w-full">
            <Form
              labelAlign="left"
              labelCol={{ span: 3 }}
              wrapperCol={{ span: 21 }}
              form={form}
              autoComplete="off"
              style={{ width: "100%" }}
            >
              <FormItem label="用户名" field="username">
                <Input placeholder="请输入" />
              </FormItem>
              <FormItem label="密码" field="password">
                <Input placeholder="请输入" />
              </FormItem>
              <FormItem wrapperCol={{ span: 24 }}>
                <Button
                  type="primary"
                  shape="round"
                  loadingFixedWidth
                  long
                  style={{}}
                >
                  登录
                </Button>
              </FormItem>
            </Form>
          </div>
        </div>
      </div>
      <div className="custom-shape-divider absolute z-0">
        <img className="w-full" src={loginSvg} alt="" />
      </div>
    </div>
  );
}
